<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Admin - Add Section</title>
<!-- <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> -->
<jsp:include page="../includeFiles.jsp" ></jsp:include>

<link rel="stylesheet" href="<%=request.getContextPath()%>/views/css/ui/jquery-ui-1.10.4.custom.min.css">
<script src="<%=request.getContextPath()%>/public/js/ui/jquery.ui.core.js"></script>
<script src="<%=request.getContextPath()%>/public/js/ui/jquery.ui.widget.js"></script>
<script src="<%=request.getContextPath()%>/public/js/ui/jquery.ui.datepicker.js"></script>
<script>
	$(function() {
		$( "#term_start_date" ).datepicker({
			defaultDate: "+1w",
			changeMonth: true,
			numberOfMonths: 1,
			dateFormat: 'yy-mm-dd',
			beforeShowDay: noSunday,
			onClose: function( selectedDate ) {
				$( "#term_end_date" ).datepicker( "option", "minDate", selectedDate );
			}
		});
		$( "#term_end_date" ).datepicker({
			defaultDate: "+1w",
			changeMonth: true,
			numberOfMonths: 1,
			dateFormat: 'yy-mm-dd',
			beforeShowDay: noSunday,
			onClose: function( selectedDate ) {
				$( "#term_start_date" ).datepicker( "option", "maxDate", selectedDate );
			}
		});
	});
	function noSunday(date){
	    return [date.getDay() != 0, ''];
	};
</script>
</head>

<body class="left-sidebar">

<!-- Session check : user logged in or not/ press back button -->
<jsp:include page="../common/checkSession.jsp"></jsp:include>
<jsp:include page="../common/checkAdminRole.jsp" />

	<!-- Wrapper -->
	<div id="wrapper">

		<!-- Content -->
		<div id="content">
			<div id="content-inner">

				<!-- Login -->
						<div id="login_content">
						<header>
							<h2>Add Section</h2>
						</header>
						
						<span class="success_msg">${section_add_successfull}</span>
						<span class="error_msg">${section_add_not_successfull}</span>
						<span class="error_msg">${null_values}</span>
						<span class="error_msg">${validate_section_passwords}</span>
						<span class="error_msg">${validate_section_email}</span>
						<span class="error_msg">${validate_section_name}</span>
						<span class="error_msg">${user_exists}</span>
						<span class="error_msg">${section_exists}</span>						
						<!-- js validation Error display -->
						<div class="submit_errors_msg">
							<ul>
								<li id="submit_is_field_empty" class="submit_errors">All * fields are required.</li>
								<li id="submit_name_error" class="submit_errors">Name must be between 2 to 50 characters, allowed characters:A-Za-z0-9</li>
								<li id="submit_email_error" class="submit_errors">Email-id is invalid.</li>
								<li id="submit_pass_error" class="submit_errors">Password : at least 8 characters, 1 upper-case, number & special character.</li>
								<li id="submit_pass_compare_error" class="submit_errors">Passwords must be similar.</li>
							</ul>
						</div>
						
						<form name="addSectionForm" action="${pageContext.request.contextPath}/AddSectionServlet" action="post" onsubmit="return checkFormErrors();">
						<!-- Hidden section id field -->
							<div>
								<!-- <label>Section Name:</label> -->
								<input id="section_id" type="hidden">
								<input type="hidden" id="action_type" name="action_type" value="create">
							</div>
							<!-- Section Name -->
							<div>
								<label>Section Name: <span class="error_msg">*</span></label>
								<input id="section_name" type="text" placeholder="Section Name"  maxlength="32" tabindex="1" name="section_name">
							</div>
							<div id="name_error" class="error_info">
								<ul>
									<li id="name_empty" class="invalid">Section name can't be empty.</li>
									<li id="name_length" class="invalid">Length must be between 2 to 32.</li>
									<li id="name_invalid" class="invalid">Only alphanumeric characters.</li>
								</ul>
							</div>
							
							<!-- Term Start Date -->
							<div>
								<label>Term Start Date: <span class="error_msg">*</span></label>
								<input id="term_start_date" type="text" placeholder="Term Start Date" tabindex="2" name="term_start_date">
							</div>
							
							<!-- Term End Date -->
							<div>
								<label>Term End Date: <span class="error_msg">*</span></label>
								<input id="term_end_date" type="text" placeholder="Term End Date" tabindex="3" name="term_end_date">
							</div>
							
							<!-- Section Email -->
							<div>
								<label>Email ID: <span class="error_msg">*</span></label>
								<input id="section_email" type="text" placeholder="Email ID" maxlength="32" tabindex="4" name="section_email">
							</div>
							
							<!-- Email Validation error and success message area. -->
							<div id="email_error" class="error_info">
								<ul>
									<li id="email_empty" class="invalid">Email address cannot be empty.</li>
									<li id="email_invalid" class="invalid">Valid email address?</li>
								</ul>
							</div>
							<div>
								<label>Password: <span class="error_msg">*</span></label> 
								<input id="section_password" type="password" placeholder="Password" tabindex="5" name="section_password">
							</div>
							<!-- Password Validation error and success message area. -->
							<div id="pass_error" class="error_info">
								<ul>
									<li id="letter" class="invalid">At least <strong>one letter</strong></li>
									<li id="capital" class="invalid">At least <strong>one capital letter</strong></li>
									<li id="number" class="invalid">At least <strong>one number</strong></li>
									<li id="length" class="invalid">Be at least <strong>8 characters</strong></li>
									<li id="character" class="invalid">At least <strong>one special character</strong></li>
								</ul>
							</div>
							<!-- Re-enter Password -->
							<div>
								<label>Confirm Password: <span class="error_msg">*</span></label> 
								<input id="section_repassword" name="section_repassword" type="password" placeholder="Re-enter Password" maxlength="32" tabindex="6">
							</div>
							<!-- Compare Passwords. -->
							<div id="compare_pass_error" class="error_info">
								<ul>
									<li id="compare_pass" class="invalid">Passwords must be similar & non-empty.</li>
								</ul>
							</div>
							<div>	
								<input type="submit" value="Add Section" class="button" tabindex="7">
							</div>
						</form>
					</div>

			</div>
		</div>

		<!-- Sidebar -->
		<div id="sidebar">

			<!-- Sidebar Header - Logo & Name -->
			<%@include file="../common/sidebarHeader.jsp" %>

			<jsp:include page="adminMenu.jsp" />
							
			<!-- Sidebar Footer Content -->
			<%@include file="../common/sidebarFooter.jsp" %>

		</div>

	</div>
	<script type="text/javascript">
		$(function(){
			$("#sectionSettings").addClass("current_page_item");
		});
	</script>
	
	<script type="text/javascript">
		$(".submit_errors_msg").hide();
		$(".submit_errors").hide();
		
		function checkFormErrors(){
			if(isAnyFieldEmpty($('#section_name'),$('#term_start_date'),$('#term_end_date'),$('#section_email'),$('#section_password'),$('#section_repassword'))){
				return checkForm($('#submit_name_error'),$('#submit_email_error'),$('#submit_pass_error'),$('#submit_pass_compare_error'));
			}
			return false;
		}
	
		/* Validation */
		$("#section_email").keyup(function() {
			isEmailValid($("#section_email"));
		});	
		$("#section_name").keyup(function() {
			isNameValid($("#section_name"));
		});
		$("#section_password").keyup(function() {
			isPasswordValid($("#section_password"));
		});
		$("#section_repassword").keyup(function() {
			isPasswordSame($("#section_password"),$("#section_repassword"));
		});
	</script>
	</body>
</html>